<template>
  <div>
    <el-card
      class="card"
      shadow="hover"
      style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
    >
      <template #header>
        <h2 class="title">词库管理</h2>
      </template>
      <el-row :gutter="8">
        <el-col :span="12">
          <h3 :style="{ margin: '16px 0' }">新词管理</h3>
          <el-form :inline="true" class="mid">
            <el-form-item>
              <el-input v-model="addNew" placeholder="输入要添加的新词"></el-input
            ></el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addNewBtn">添加</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <h3 :style="{ margin: '16px 0' }">停用词管理</h3>
          <el-form :inline="true" class="mid">
            <el-form-item>
              <el-input v-model="addStop" placeholder="输入要添加的停用词"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addStopBtn">添加</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row :gutter="8">
        <el-col :span="12">
          <h3 :style="{ margin: '16px 0' }">新词列表</h3>
          <a-list size="small" bordered :data-source="newWordsList">
            <el-table :data="newWordsList" class="mid">
              <el-table-column prop="id" label="ID" min-width="180"/>
              <el-table-column prop="name" label="名称"/>
              <el-table-column label="操作">
                <el-button type="danger" @click="deleteNewBtn">删除</el-button>
              </el-table-column>
            </el-table>
            <template #header>
              <div> </div>
            </template>
            <template #footer>
              <div> </div>
            </template>
          </a-list>
        </el-col>
        <el-col :span="12">
          <h3 :style="{ margin: '16px 0' }">停用词列表</h3>
          <a-list size="small" bordered :data-source="stopWordsList">
            <el-table :data="stopWordsList" class="mid">
              <el-table-column prop="id" label="ID" min-width="180"/>
              <el-table-column prop="name" label="名称"/>
              <el-table-column label="操作">
                <el-button type="danger" @click="deleteStopBtn">删除</el-button>
              </el-table-column>
            </el-table>
            <template #header>
              <div></div>
            </template>
            <template #footer>
              <div></div>
            </template>
          </a-list>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  deleteStopWord,
  deleteNewWord,
  addStopWord,
  addNewWord,
  getStopWordsList, getNewWordsList
} from "@/api/words";

  const addNew = ref();
  const addStop = ref();
  const deleteNew = ref();
  const deleteStop = ref();

  const newWordsList = ref([]);
  const stopWordsList = ref([]);

  const addNewBtn = () => {
    addNewWord(addNew.value).then((res) => {
      console.log(res);
    });
  };

  const deleteNewBtn = () => {
    deleteNewWord(deleteNew.value).then((res) => {
      console.log(res);
    });
  };

  const addStopBtn = () => {
    addStopWord(addStop.value).then((res) => {
      console.log(res);
    });
  };

  const deleteStopBtn = () => {
    deleteStopWord(deleteStop.value).then((res) => {
      console.log(res);
    });
  };
  const onGetNewWordsList = () => {
    getNewWordsList().then((res) => {
      newWordsList.value = res.data.hasOwnProperty("new_words")
        ? res.data.new_words
        : [];
    });
    getStopWordsList().then((res) => {
      stopWordsList.value = res.data.hasOwnProperty("new_words")
        ? res.data.new_words
        : [];
    });
  };

  onMounted(() => {
    onGetNewWordsList();
  });
</script>

<style scoped lang="scss">
  .mid {
    //设置居中
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
</style>
